<template>
    <!-- operation -->
    <TableOperate
        :buttonObject="buttonObject"
        :searchList="searchList"
        :model="model"
        :items="items"
    />
    <!-- table -->
    <!-- max-height: 520px;overflow-y: auto; -->
    <el-table
        :data="tableData"
        border
        stripe 
        :header-row-style="headerStyle" 
        style="width:100%;margin-top:20px;"
    >
        <el-table-column 
            v-for="(item, i) in tableConfigure" 
            :key="i" 
            :show-overflow-tooltip="item.overflow"
            :prop="item.prop" 
            :label="item.label" 
            :width="item.width"
        >
            <template #default="scope">
                <template v-if="item.key === 'toIndex'">
                    <span>{{ scope.$index + 1 }}</span>    
                </template>
                <template v-else-if="item.key === 'toDate'">
                    <span>{{ scope.row[item.prop] ? formatDate(scope.row[item.prop]) : '-' }}</span>
                </template>
                <template v-else-if="item.key === 'toDateTime'">
                    <span>{{ scope.row[item.prop] ? formatDate(scope.row[item.prop], 'time') : '-' }}</span>
                </template>
                <template v-else-if="item.customRender">
                    <el-tag v-if="item.key === 'tag'">{{ item.customRender(scope.row[item.prop]) }}</el-tag>
                    <span v-else>{{ item.customRender(scope.row[item.prop]) }}</span>    
                </template>
                <template v-else-if="item.key === 'actions'">
                    <!-- <span>{{ scope.row[item.prop] ? formatDate(scope.row[item.prop], 'time') : '-' }}</span> -->
                    <el-button-group size="small">
                        <template v-for="(action, index) in item.actionsList" :key="index">
                            <el-button 
                                v-if="action.permission"
                                @click="action.cb" 
                                :type="action.buttonType" 
                                :icon="getIcon(action.icon)" 
                                v-hasPermi="action.permission"
                                text
                            >
                                {{action.text}}
                            </el-button>
                            <el-button 
                                v-else
                                @click="action.cb" 
                                :type="action.buttonType" 
                                :icon="getIcon(action.icon)" 
                                text
                            >
                                {{action.text}}
                            </el-button>
                        </template>
                    </el-button-group>
                </template>
                <template v-else>
                    <span>{{ scope.row[item.prop] }}</span>    
                </template>
            </template>
        </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-pagination
    v-if="pagination"
    class="pagination"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    />
</template>

<script lang="ts">
import {defineComponent, PropType, computed, reactive, ref, watch} from 'vue'
import TableOperate from './TableOperate.vue'
import { formatToDate, formatToDateTime } from '@/utils/dateUtil'
import {paginationPropType, tableCloum, searchObjectType, buttonObjectType} from './constant'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { useRequest } from 'vue-request'

export default defineComponent({
    props: {
        url:Function,
        tableConfigure: {
            type: Array as PropType<tableCloum[]>,
            require: true
        },
        pagination:Boolean,
        buttonObject:Object as PropType<buttonObjectType>,
        searchList: {
            type: Array as PropType<searchObjectType[]>
        },
        model:Object,
        items:Object
    },
    async setup(props) {
        // const {currentPage,
        //     handleSizeChange,handleCurrentChange } = props.paginationProp

        const headerStyle = {fontSize: 14,fontWeight: 400}

        // 分页
        let currentPage = ref(1)
        let pageSize = ref(10)

        const handleSizeChange = (val: number) => {
            pageSize.value =val
        }
        const handleCurrentChange = (val: number) => {
            currentPage.value =val
        }

        const pagination = {
                pageSize: pageSize,
                pageNum: currentPage
        }

        const {
                data,
                run,
                loading,
                refresh,
            } = await useRequest(props.url, {
                defaultParams: [pagination],
                loadingDelay: 1000
            });

        watch([() => currentPage.value, () => pageSize.value],()=> {
            run(pagination)
        })

        const tableData = computed(
            () => data?.value?.list
        )
        const total = computed(
            () => {
                const temp = data?.value?.total
                
                return temp ? parseInt(temp) : temp
            }
        )
        
    const Icons = {Delete, Edit, Search, Share, Upload}
    // 获取ICON
    const getIcon = (icon:string) => {
        return Icons[icon]
    }

    // 日期格式化
      const formatDate = (val: string, type: 'date' | 'time' = 'date') => {
        const formatFn = type === 'date' ? formatToDate : formatToDateTime;
        return val.length === 10 ? formatFn(Number(val) * 1000) : formatFn(val);
      };

    return {
        currentPage,total,pageSize,loading,refresh,formatDate,
        handleSizeChange,handleCurrentChange,headerStyle,tableData,getIcon
    }
    }
})
</script>

<style lang="less" scoped>
.x-table {
    width: 100%;
    margin-top:20px;
}
.pagination {
    margin-top: 20px;
    justify-content: flex-end;
}
</style>
    